$(function(){



    var $leftWidth = $('.leftWidth');
    var $xcname = $(':input[name=xcname]');
    var $addModal = $('#addModal');
    var $photeList = $('.photeList');

    // 渲染错误提示
    function geterrorhtml(errmsg){
        return `
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>警告!</strong> ${errmsg}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        `;
    }
    // 渲染相册列表名称
    function getxchtml(xcnane){
        return `
            <li class="list-group-item active"  data-name="${xcnane}">
                 <a href="javascript:;" class="xc">${xcnane}</a>
            </li>
        `;
    }

    // 渲染相册
    function generaterPhoteHtml(data){
        return `
            <div class="col-md-2">
                <div class="card">
                    <img class="card-img-top" src="/img/${data.filename}" alt="p_1">
                </div>
            </div>
        `;
    }

    // 初始化页面
    $.get('/init',{},function(result){
        $leftWidth.find('ul').html('');
        for(let key in result){
            $leftWidth.find('ul').append(getxchtml(key));
            $leftWidth.find('ul li').removeClass('active').eq(0).addClass('active').attr("data-name","默认");

            if(key=='默认' && result[key] && result[key].length>=0){
                $photeList.html('');
                if(result[key].length>0){
                    for(let i=0; i<result[key].length; i++){
                        $photeList.append(generaterPhoteHtml(result[key][i]));
                    };
                }
            }
        };
    },'json');

    // 保存
    $('#save').click(function(){
        var xcname = $xcname.val();
        if(xcname){
            $addModal.modal('hide');
            $leftWidth.find('ul li').removeClass('active');
            $leftWidth.find('ul').append(getxchtml(xcname));
        }else{
            $addModal.find('.modal-body').prepend(geterrorhtml('相册名称不能为空!'));
        }
    });

    $('#myfile').change(function(e){
        if(e.target.files && e.target.files.length>0){
            var formData = new FormData();
            formData.append('type',$('.leftWidth ul li.active').attr('data-name'));
            formData.append('myfile',e.target.files[0]);

            $.ajax({
                url : '/single',
                data: formData,
                type: 'post',
                contentType: false,
                processData: false,
                success: function(result){
                    $photeList.append(generaterPhoteHtml(result));
                }
            });
        }
    });

    // 分组


    // 添加相册处理
    $addModal.on('hide.bs.modal',function(){
        $addModal.find(".alert").alert('close');
        if($xcname.val()){
            $photeList.html('');
            $xcname.val('');
        }
    });

    // 相册点击事件处理
    $leftWidth.on('click','ul li:not(".active") a',function(){
        $leftWidth.find('ul li').removeClass('active');
        $(this).parent().addClass('active');
        var category = $(this).parent().attr('data-name');

        $.post('/category',{category},function(result){
            if(result){
                $photeList.html('');
                for(let i=0; i<result.length; i++){
                    $photeList.append(generaterPhoteHtml( result[i]));
                }
            }
        },'json');
    });



});
